<template>
  <div style="margin-top: 88px; ">
    <el-row>
        <el-col :span="1"></el-col>
    <el-col :span="13">
        <el-carousel height="400px" style="margin-bottom:20px;">
        <el-carousel-item v-for="item in chart" :key="item.index">
            <!-- <h3 class="small justify-center" text="2xl">{{ item.text }}</h3> -->
            <img :src="item.image" :alt="item.text">
            <div class="imgtext"><span>{{item.text}}</span></div>     
        </el-carousel-item>
        </el-carousel>
      <ChartMap></ChartMap>
    </el-col>
    <el-col :span="9">
        <div class="hometext">
            <el-divider content-position="left">
                <span> 公告中心 </span>
            </el-divider>
            <div class="cardlist">
            <el-timeline>
              <el-timeline-item
                v-for="notice in noticeData"
                :key="notice.id"
                :timestamp="new Date(notice.noticetime).toLocaleString()"
                type = primary
                hollow
              >
                <el-card >
                  <h6>{{notice.source}}</h6>
                  <el-collapse>
                    <el-collapse-item  :name="notice.id">
                      <template #title>
                        <h5>{{notice.title}}</h5>
                      </template>
                       <h3>{{notice.title}}</h3>
                        <div class="content">
                            <p>{{ notice.content }}</p>
                        </div>
                  </el-collapse-item></el-collapse>
                </el-card>
              </el-timeline-item>
            </el-timeline> 
          </div>
           <!--分页-->
          <div style="padding: 10px 20px; margin-left: 30px;">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              v-model:currentPage="pageNum"
              :page-sizes="[15, 30, 50]"
              v-model:page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>

    </el-col>
    <el-col :span="1"></el-col>
  </el-row>
    
  </div>
  <el-backtop :right="100" :bottom="100" />
</template>
<script>
import ChartMap from '@/components/ChartMap.vue'
export default {
  name: "Homepage",
  components: { ChartMap },

  data() {
    return {
      chart: [
        { text: "了解接种信息", image: "https://img1.baidu.com/it/u=2062763540,113366027&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" },
        { text: "疫苗的重要性", image: "https://img1.baidu.com/it/u=2577295533,2129813721&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500" },
        { text: "疫苗接种系统", image: "https://img1.baidu.com/it/u=1346726115,426683794&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" },
        { text: "预约疫苗接种", image: "https://img0.baidu.com/it/u=1701387202,2766695113&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" },
      ], //疫苗类型列表
      noticeData: [],
      total: 0, //数据总条数
      pageNum: 1, //当前页
      pageSize: 15, //页大小
    };
  },
  methods: {
    handleSizeChange(val) {
        //页大小改变
        this.pageSize = val;
        this.getnoticeDate();
      },
    handleCurrentChange(val) {
        //当前页改变
        this.pageNum = val;
        this.getnoticeDate();
      },
      //分页查询
      getnoticeDate() {
        this.$http
          .get(
            "/inoculations/notice/pageall",
            {
              params: {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
              },
            }
          )
          .then((res) => {
            if (res.statusCode == "200") {
              this.total = res.data.total;
              this.noticeData = res.data.records;
            }
          })
          .catch(() => {
            ElMessage.error("数据加载失败,请刷新！");
          });
      },
  },
  created() {
    this.getnoticeDate();
  },
};
</script>
<style scoped>
.el-carousel__item img {
    height: 400px;
    width: 900px;
    margin: 0 auto;
    text-align: center;
	  display: table-cell;
	  vertical-align: middle;
    position: absolute;/*设为绝对定位*/
    opacity: 0.7;/*设置透明度*/

}
.imgtext {
    height: 40px;
    background-color: #171a1e;

}
.hometext span {
    font-size: 20px;
    font-weight: 600;
}
/* .thebutton {
   padding: 12px;
   font-size: 13px;
   box-shadow: 0 0 0 2px rgba(45,140,240,.2);
} */
.textitem p {
    text-indent: 2em;
    font-size: 16px;
    line-height: 28px;
    display: -webkit-box; 
}
.el-card span {
  font-weight: bold;
  font-size: 20px;
}
    /* 文字超过三行变为省略号
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;... */
.el-carousel__item span {
    margin-left: 30px;
    margin-top: 10px;
    /* bottom: 20px; */
    font-size: 16px;
    font-weight: 600;
    color: ivory;
    position: absolute;/*设为绝对定位*/
}


.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.cardlist {
  width: 100%;
  margin: auto;
  padding: 20px;
}
.cardlist h6 {
  font-weight: 500;
}
.cardlist h5 {
  font-size: 13px;
  line-height: 14px;
}
.content p {
  text-indent: 2em;
  font-size: 13px;
}
</style>
